/// <reference path="../../bootstrap/scss/bootstrap-reboot.scss" />

$outline-color: rgba($black, 0.1);
$box-shadow-outline: 0 0 0 1px $outline-color;
$bar-size-short: 16px !default;
$base-margin: 6px !default;
$columns: 9 !default; // this affects the number of swatches per row and the width of the color picker, saturation, etc.
$bar-size-large: ($bar-size-short * $columns) + ($base-margin * ($columns - 1));

$cp-width: 200px;
$cp-gap: 5px;
$cp-bar-size: 10px;
$cp-border-radius: 0;
$cp-swatch-border-radius: 3px;
$cp-saturation-outline: none;
$cp-bar-outline: none;
$cp-preview-outline: inset 0 0 0 1px rgba($black, 0.1);
$cp-preview-size: $cp-bar-size * 2 + $cp-gap;
$cp-cursor: default;

@mixin bgCheckerBox($size: 10px) {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), rgb(255, 255, 255);
    background-size: $size $size;
    background-position: 0 0, $size/2 $size/2;
}

@mixin bgSaturation() {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

@mixin bgHueHorizontal() {
    background: linear-gradient(to left, rgb(255, 0, 0) 0%, rgb(255, 128, 0) 8%, rgb(255, 255, 0) 17%, rgb(128, 255, 0) 25%, rgb(0, 255, 0) 33%, rgb(0, 255, 128) 42%, rgb(0, 255, 255) 50%, rgb(0, 128, 255) 58%, rgb(0, 0, 255) 67%, rgb(128, 0, 255) 75%, rgb(255, 0, 255) 83%, rgb(255, 0, 128) 92%, rgb(255, 0, 0) 100%);
}

@mixin bgHueVertical() {
    background: linear-gradient(to top, rgba(255, 0, 0, 1) 0%, rgba(255, 128, 0, 1) 8%, rgba(255, 255, 0, 1) 17%, rgba(128, 255, 0, 1) 25%, rgba(0, 255, 0, 1) 33%, rgba(0, 255, 128, 1) 42%, rgba(0, 255, 255, 1) 50%, rgba(0, 128, 255, 1) 58%, rgba(0, 0, 255, 1) 67%, rgba(128, 0, 255, 1) 75%, rgba(255, 0, 255, 1) 83%, rgba(255, 0, 128, 1) 92%, rgba(255, 0, 0, 1) 100%); /* W3C */
}

.colorpicker {
    position: relative;
    display: none;
    font-size: inherit;
    color: inherit;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    padding: 0;
    width: $cp-width;
    height: auto;
    box-sizing: content-box;

    gap: $cp-gap;
    grid-template-columns: ($cp-width - $cp-preview-size - $cp-gap) $cp-preview-size;
    grid-template-rows: ($cp-width * 0.75) $cp-bar-size $cp-bar-size;

    &.colorpicker-visible {
        display: grid;

        > * {
            display: block;
        }

        &:not(.colorpicker-with-alpha) > .colorpicker-alpha {
            display: none;
        }
    }

    > * {
        position: relative;
        // Stretch to fill cells
        width: 100%;
        height: 100%;
        border-radius: $cp-border-radius;
        box-shadow: none !important;
    }
}

.colorpicker-saturation {
    position: relative;
    @include bgSaturation();
    cursor: $cp-cursor;
    box-shadow: $cp-saturation-outline;
    grid-column: 1 / span 2;
    grid-row: 1;
    overflow: hidden;

    .colorpicker-guide {
        display: block;
        position: absolute;
        inset-inline-start: 0;
        top: 0;
        width: 4px;
        height: 4px;
        box-shadow: #fff 0px 0px 0px 1.5px, rgba($black, 0.3) 0px 0px 1px 1px inset, rgba($black, 0.4) 0px 0px 1px 2px;
        border-radius: 50%;
        transform: translate(-2px, -2px);
    }
}

.colorpicker-hue,
.colorpicker-alpha {
    cursor: $cp-cursor;
    box-shadow: $cp-bar-outline;

    .colorpicker-guide {
        position: absolute;
        display: block;
        top: 0;
        inset-inline-start: 0;
        margin-top: 1px;
        width: 4px;
        border-radius: 1px;
        height: ($cp-bar-size - 2px);
        box-shadow: rgba($black, 0.6) 0px 0px 2px;
        background: $white;
        transform: translateX(-2px);
    }
}

.colorpicker-hue {
    @include bgHueHorizontal();
    grid-column: 1;
    grid-row: 2 / span 2;

    .colorpicker-guide {
        height: ($cp-bar-size * 2 + $cp-gap - 2px);
    }

    .colorpicker-with-alpha & {
        grid-row: 2;

        .colorpicker-guide {
            height: ($cp-bar-size - 2px);
        }
    }
}

.colorpicker-alpha {
    @include bgCheckerBox();
    display: none;
    grid-column: 1;
    grid-row: 3;
}

.colorpicker-alpha-color {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
}

.colorpicker.colorpicker-disabled,
.colorpicker.colorpicker-disabled * {
    cursor: default !important;
}

.colorpicker-bs-popover .popover-body {
    padding: 0.75rem;
}

.colorpicker-clear {
    clear: both;
    display: block;
}

.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
    display: block;
}

.colorpicker-input-addon {
    position: relative;
    padding: 0;
    width: $input-height;

    > i {
        display: inline-block;
        cursor: pointer;
        vertical-align: text-top;
        height: 24px;
        width: 24px;
        position: relative;
        border: 1px solid rgba($black, 0.2);
        border-radius: var(--border-radius-sm);
    }

    &:before {
        content: "";
        position: absolute;
        width: 24px;
        height: 24px;
        display: inline-block;
        vertical-align: text-top;
        @include bgCheckerBox();
    }
}

.colorpicker-alpha,
.colorpicker-saturation,
.colorpicker-hue {
    user-select: none;
}

.colorpicker.colorpicker-disabled:after {
    border: none;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(233, 236, 239, 0.33);
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    z-index: 2;
    position: absolute;
}

.colorpicker.colorpicker-disabled .colorpicker-guide {
    display: none;
}


// Preview extension
// ---------------------------------

.colorpicker-preview {
    @include bgCheckerBox();
    grid-column: 2;
    grid-row: 2 / span 2;
    overflow: hidden;
    white-space: normal;

    > div {
        position: absolute !important;
        inset-inline-start: 0;
        font-size: 0px;
        top: 0;
        width: 100%;
        height: 100%;
        box-shadow: $cp-preview-outline;
    }
}


// Swatches extension
// ---------------------------------

.colorpicker-swatches {
    box-shadow: none;
    height: auto;
    grid-row: -1;
    grid-column: 1 / -1;
    margin-top: $cp-gap;
    padding-inline: 1px;
}

.colorpicker-swatches--inner {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    //grid-auto-rows: 16px;
    gap: $cp-gap;
    padding-top: $cp-gap * 2;
    border-top: 1px solid rgba($black, 0.1);

    > .colorpicker-clear {
        display: none;
    }
}

.colorpicker-swatch {
    position: relative;
    display: block;
    cursor: pointer;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    min-height: 14px; // fail safety for aspect-ratio
    @include bgCheckerBox();
}

.colorpicker-swatch--inner {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    box-shadow: $cp-preview-outline;
    border-radius: $cp-swatch-border-radius;

    &:active,
    &:focus, &:focus-visible {
        outline: 1px solid rgba($white, 0.75);
        outline-offset: -2px;
    }
}